<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>后台登录</title>
    <link rel="stylesheet" type="text/css" href="__ROOT__/admin/layui_new/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="__ROOT__/admin/css/admin.css"/>
    <script src="__ROOT__/static/assets/js/jquery-2.1.4.min.js" charset="utf-8"></script>
    <script src="__ROOT__/admin/upload/layui/layui.js" type="text/javascript"></script>
    <script src="__ROOT__/admin/upload/js/upload.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="layui-container">

    <div style="margin: 0 auto;width: 60%;padding: 30px">

            <form class="layui-form" method="post" action="javascript:;">
                <div class="layui-form-item">
                    <label class="layui-form-label">案例名称:</label>
                    <div class="layui-input-block">
                        <input type="text" name="title"    placeholder="输入案例名称" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">案例标签:</label>
                    <div class="layui-input-block">
                        <input type="text"  name="tag" readonly  placeholder="选择标签" autocomplete="off" class="layui-input tags">
                    </div>
                    <div class="layui-input-suffix" style="margin-right: -30px">
                        <button class="layui-btn layui-btn-primary tag">选择标签</button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">封面图片:</label>
                    <div class="layui-input-block">
                        <button type="button" class="layui-btn" id="ID-upload-demo-btn">
                            <i class="layui-icon layui-icon-upload"></i> 封面图上传
                        </button>
                        <div style="width: 132px;">
                            <div class="layui-upload-list">
                                <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
                                <div id="ID-upload-demo-text"></div>
                            </div>
                            <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
                                <div class="layui-progress-bar" lay-percent=""></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <input type="text" id="img" name="img"  lay-verify="required"  class="layui-input" style="display: none">
                </div>
               <div>
                   <input type="text" id="ids" name="ids"  lay-verify="required"  class="layui-input" style="display: none">
               </div>

                <div class="layui-form-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">文件上传</label>
                        <div class="layui-inline">
                            <div class="layui-upload-drag" id="upload">
                                <i class="layui-icon"></i>
                                <p>点击上传，或将文件拖拽到此处</p>
                            </div>
                        </div>
                        <div class="layui-inline" id="upload_preview"></div>
                        <div class="layui-form-item layui-hide layui-input-block" id="upload_progress">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline" style="width:21%;">
                                <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-form-item layui-hide layui-input-block" id="upload_progress">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-inline" style="width:21%;">
                                <div class="layui-progress" lay-showpercent="true" lay-filter="upload_progress">
                                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-input-block">
                            <table class="layui-table file-list layui-hide">
                                <tr>
                                    <td>名称</td>
                                    <td>大小</td>
                                    <td>状态</td>
                                    <td>操作</td>
                                </tr>
                            </table>
                            <button class="layui-btn all-upload layui-hide">全部上传</button>
                        </div>

                    </div>


                </div>


                <div class="layui-form-item layui-form-text">
                    <label class="layui-form-label">案例内容:</label>
                    <div class="layui-input-block">
                        <textarea name="content" placeholder="请输入内容" rows="20" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

    </div>


</div>
<script src="__ROOT__/admin/layui_new/layui.js" type="text/javascript"></script>
<!--单个图片上传-->
<script>
    layui.use(function(){
        var upload = layui.upload;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.$;
        // 单图片上传
        var uploadInst = upload.render({
            elem: '#ID-upload-demo-btn',
            url : '/index.php/index/documentation/upload',
            field:"myFile",
            before: function(obj){
                // 预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
                });

                element.progress('filter-demo', '0%'); // 进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            },
            done: function(res){
                // 若上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }
                // 上传成功的一些操作
                // 将获取到的 img值，追加写入input
                var data = res.data.path;

                $("#img").val($("#img").val() + data);

                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
            },
            error: function(){
                // 演示失败状态，并实现重传
                var demoText = $('#ID-upload-demo-text');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst.upload();
                });
            },
            // 进度条
            progress: function(n, elem, e){
                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
                if(n == 100){
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });

    });

</script>

<!--案例标签-->
<script>

        $(".tag").on("click", function(){

            //iframe层
            layer.open({
                type: 2,
                title: '增加标签',
                shadeClose: true,
                shade: 0,
                maxmin: true, //开启最大化最小化按钮
                area: ['800px', '600px'],
                content:'/index/documentation/add_tag',

            });
        });


</script>
<script>
<!-- 表单提交-->
    layui.use(function(){
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(formDemo)', function(data){
            var url = "{:url(\'documentation/up_list\')}";
            var data=(data.field);

            //    执行异步请求 ，$.post
            $.post(url,data,function(result){
                if(result.status ==0){
                    layer.open({
                        content:result.message,
                        icon:2,
                        title : '错误提示'
                    });

                }
                if(result.status ==1){
                    layer.open({
                        content : result.message,
                        icon : 1,
                        yes : function(){
                            setTimeout(function () {
                                window.parent.location.reload(); //刷新父页面
                                var index = parent.layer.getFrameIndex(window.name)
                                parent.layer.close(index);
                            }, 500);
                        }
                    });

                }

            },'JSON');
            return false;
        });
        $("#cancel").on("click", function(){
            window.parent.location.reload(); //刷新父页面
            var index = parent.layer.getFrameIndex(window.name)
            parent.layer.close(index);
        });
    });
</script>



</body>
</html>